<template>
	<view>
		<view class="series-top" :style="{height: tui.navBarHeight + 335 +'px',background:`url(${userInfo.avatar || $avatar}) no-repeat`}">
			<u-navbar title-size="34"  back-icon-color="#ffffff" :immersive="true"
				:background="background" :border-bottom="false" :custom-back="tui.goBack"></u-navbar>
			<view style="width: 100%;height: 335px; backdrop-filter:blur(20px);background-color: rgba(000,000,000,.3);"></view>
		</view> 
		
		<view class="card-box">
			<view class="user-icon">
				<image :src="userInfo.avatar || $avatar" mode="aspectFill"></image>
			</view>
			<view class="d-flex justify-content-center align-items-center certification-style px-4">
				<view class="text-343A40 fz-36 text-center font-weight-600 u-line-2">{{userInfo.nickname}}</view>
				<view class="certification-icon" v-if="userInfo.is_official == 1">
					<image src="/static/market/author-certification.png"></image>
				</view>
			</view>
			<view class="d-flex align-items-center justify-content-center pt-3">
				<view class="text-999CAA fz-24">
					{{userInfo.address.substr(0,6)}}....{{userInfo.address.substr(-4)}}
				</view>
				<view class="author-copy" @click="copy(userInfo.address)">
					<image src="/static/mine/copy-new.png"></image>
				</view>
			</view>
			
			<scroll-view style="width: 100%; white-space: nowrap" scroll-x="true" scroll-with-animation
				:scroll-into-view="scrollViewId" @scrolltolower="scrolltolower">
				<view class="creation-list d-flex align-items-center">
					<view v-for="(item,index) in albumList">
						<view @tap="selective(index)" :id="`id_${index}`" :key="index" :data-current="index"
							@tap.stop="swichNav"
							class="text-343A40 creation-title-list d-flex justify-content-between align-items-center">
							<view :class="{'active':isSelective === index,'mgr-12':index == albumList.length -1}" class="creation-name fz-28 ">
								<image class="album-img" v-if="isSelective !== index" src="/static/market/page-album-def.png" mode="aspectFill"></image>
								<image class="album-img" v-else src="/static/market/page-album-sel.png" mode="aspectFill"></image>
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="padding-wrap creation-box d-flex justify-content-between">
				<view class="creation-item" v-for="item in list" @click="toDetail(item)">
					<view class="position-relative">
						<view class="creation-cover">
							<image :src="item.cover" mode="aspectFill" v-if="item.type != 1"></image>
							<image :src="item.file" mode="aspectFill" v-else></image>
						</view>
						<view class="position-absolute creation-quantity">
							<view class="d-flex justify-content-center align-items-center">
								<span class="text-CCCDD5 fz-20">发行:</span>
								<span class="text-00D7FF fz-22 font-DIN">{{tui.filterCount(item.count)}}</span>
								<span class="line"></span>
								<span class="text-CCCDD5 fz-20">流通:</span>
								<span class="text-00D7FF fz-22 font-DIN">{{tui.filterCount(item.sell_user_works_count)}}</span>
							</view>
						</view>
					</view>
					<view class="creation-item-title text-292940 fz-26">{{item.name}}</view>
				</view>
			</view>
			<u-loadmore :status="status" v-show="moreShow" margin-top="50" />
			<u-empty v-show="total === 0 && !moreShow" color="#b5b5b5" src="/static/home/nodata-icon.png" margin-top="200"></u-empty>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				background: {
					background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%)'
				},
				scrollViewId: "id_0",
				albumPage:1,
				albumTotal:'',
				albumList:[],
				current:0,
				isSelective:'',
				userInfo:null,
				moreShow:false,
				status:'loading',
				total:'',
				page:1,
				list:[],
				user_id:'',
				scroll:0,
				scrollH: 0,
				scroll: 0,
				opcity: 0,
			}
		},
		onLoad(options) {
			this.userInfo = JSON.parse(options.userInfo)
			this.getAlbum()
			this.getAlbumWorks()
			this.getUserInfo()
		},
		mounted() {
			setTimeout(() => {
				uni.getSystemInfo({
					success: (res) => {
						this.scrollH = res.windowWidth
					}
				})
			}, 50)
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop <= 0 ? 0 : e.scrollTop;
			this.scroll = scrollTop
			let opcity = this.scroll / this.scrollH * 8;
			if (opcity >= 1 && this.opcity >= 1) {
				opcity = 1
			}
			this.opcity = opcity;   
			
			this.background.background = 'linear-gradient(180deg, rgba(0,0,0,' + this.opcity + ')0%, rgba(0,0,0,0) 100%)'
			if (this.opcity == 0) {
				this.background.background = 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%)'
			}
		},
		methods:{
			//查找用户基本信息
			getUserInfo(){
				this.$store.dispatch('user/searchUser',{user_id:this.userInfo.id}).then(res=>{
					this.userInfo = res.data
				})
			},
			//专辑列表分页加载
			scrolltolower(){
				if(this.albumList.length < this.albumTotal){
					this.albumPage++
					this.getAlbum()
				}
			},
			//获取专辑列表
			getAlbum(){
				if(this.resInfo.isRes){
					this.resInfo.resFlase()
					this.$store.dispatch('works/albumAll',{user_id:this.userInfo.id}).then(res=>{
						this.resInfo.resTrue()
						this.albumList = [...this.albumList,...res.data.data]
						this.albumTotal = res.data.total
					}).catch(error=>{
						this.resInfo.resTrue()
					})
				}
			},
			//获取藏品列表
			getAlbumWorks(){
				this.moreShow = true
				this.status = 'loading'
				let param = {
					album_id:this.album_id,
					user_id:this.userInfo.id,
					page:this.page
				}
				this.$store.dispatch('works/albumWorks',param).then(res=>{
					this.total = res.data.total
					this.list = [...this.list,...res.data.data]
					if(this.list.length == this.total && this.list.length >=4){
						this.status = 'nomore'
					}else{
						this.moreShow = false
					}
				}).catch(error=>{
					this.moreShow = false
				})
			},
			//复制钱包地址
			copy(val) {
				uni.setClipboardData({
					data: val,
					success: (data)=> {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			},
			//重置列表并请求接口
			reSetList(){
				this.page = 1
				this.total = ''
				this.list = []
				this.getAlbumWorks()
			},
			//选择专辑筛选
			selective(index) {
				if(this.isSelective !== index){
					this.isSelective = index
					this.album_id = this.albumList[this.isSelective].id
				}else{
					this.isSelective = ''
					this.album_id = ''
				}
				this.reSetList()
			},
			// 点击标题切换当前页时改变样式
			swichNav(e) {
				let cur = e.currentTarget.dataset.current;
				if (this.current == cur) {
					return false;
				} else {
					this.current = cur;
					this.checkCor();
				}
			},
			//判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCor() {
				if (this.current > 2) {
					this.scrollViewId = `id_${this.current - 2}`;
				} else {
					this.scrollViewId = `id_0`;
				}
			},
			//前往藏品详情
			toDetail(item){
				uni.navigateTo({
					url:`/pages/secondary/market/index?work_id=${item.id}`
				})
			},
		}
	}
	
</script>

<style lang="scss" scoped>
	.series-top {
		width: 100%;
		height: 250upx;
		background-size: cover !important;
		background-position: center center !important;
		position: relative;
	
	}
	.card-box {
		margin-top: -360upx;
		width: 100%;
		background: #FFFFFF;
		border-radius: 32upx 32upx 0 0;
		min-height: 800upx;
		position: relative;
		padding-bottom: 30upx;
		.user-icon {
			position: absolute;
			width: 152upx;
			height: 152upx;
			border-radius: 100%;
			padding: 4upx;
			box-sizing: border-box;
			background: #FFFFFF;
			left: 50%;
			top: -64upx;
			transform: translateX(-50%);
		
			image {
				width: 144upx;
				height: 144upx;
				border-radius: 100%;
				vertical-align: top;
			}
		}
		.certification-style{
			padding-top: 102upx;
		}
		.certification-icon{
			width: 28upx;
			height: 28upx;
			image{
				width: 28upx;
				height: 28upx;
			}
		}
		.author-copy{
			width: 32upx;
			height: 32upx;
			margin-left: 14upx;
			
			image {
				width: 32upx;
				height: 32upx;
				vertical-align: top;
			}
		}
		
	}
	.creation-list {
		height: 120upx;
		background: #ffffff;
		padding: 48upx 0 36upx 0;
		.creation-title-list {
		
			.creation-name {
				height: 60upx;
				background: #F8F9FB;
				border-radius: 30upx;
				padding: 0 24upx;
				box-sizing: border-box;
				margin-left: 24upx;
				text-align: center;
				line-height: 60upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: flex;
				align-items: center;
				justify-content: center;
				.album-img{
					width: 32upx;
					height: 32upx;
					margin-right: 10upx;
				}
				text{
					color: #666978;
				}

			}
		
			.active {
				background: #292940;
				color: #ffffff;
			}
			.mgr-12 {
				margin-right: 24upx;
			}
		}
		.active {
			background: #292940;
			color: #ffffff;
		}
	
	}
	.padding-wrap{
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.creation-box{
		flex-wrap: wrap;
		.creation-item{
			width: 337upx;
			height: 420upx;
			background: #FFFFFF;
			box-shadow: 0px 4upx 30upx -12upx rgba(102,105,120,0.2), 0px 4upx 12upx -6upx rgba(154,166,219,0.1);
			border-radius: 10upx;
			margin-bottom: 16upx;
			overflow: hidden;
			.creation-cover{
				width: 337upx;
				height: 337upx;
				image{
					width: 337upx;
					height: 337upx;
					border-radius: 10upx 10upx 0 0;
				}
			}
			.creation-quantity{
				display: inline-block;
				height: 36upx;
				padding: 0 12upx;
				background: rgba(41,41,64,0.4);
				border-radius: 24upx 0px 0px 0px;
				bottom: 0;
				right:0;
			}
			
			.creation-quantity {
				width: 248upx;
				height: 38upx;
				background: rgba(41, 41, 64, 0.65);
				border-radius: 24upx 24upx 0px 0px;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				backdrop-filter: blur(20px);
				
				box-sizing: border-box;
			/* #ifdef APP-PLUS */
				padding: 8upx 0;
			/* #endif */
			/* #ifdef H5 */
				padding: 6upx 0;
			/* #endif */
				.line {
					display: block;
					height: 20upx;
					width: 2upx;
					background: #999BA8;
					margin: 0 14upx;
				}
			}
			
			
			.creation-item-title{
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding: 0 10upx;
				box-sizing: border-box;
				line-height: 83upx;
			}
		}
	}
</style>